<template>
  <div class="order-cell">
    <div class="cell-time-status">
      <div class="cell-time">
        <span>{{orderInfo.created_at}}</span>
      </div>
      <div class="cell-status">
        <span v-if="orderInfo.order_status == 0">待付款</span>
        <span v-else-if="orderInfo.order_status == 1">待发货</span>
        <span v-else-if="orderInfo.order_status == 2">配送中</span>
        <span v-else-if="orderInfo.order_status == 3">已收货</span>
        <span v-else-if="orderInfo.order_status == 4">已退款</span>
      </div>
    </div>
    <div class="cell-goods border-1px-top">
      <div class="goods-item" v-for="item in orderInfo.order_goods">
        <div class="item-pic">
          <img class="ignore" :src="item.goods_image" alt="">
        </div>
        <div class="item-info">
          <div class="info-name">
            <h3>{{item.goods_name}}</h3>
          </div>
        </div>
        <div class="item-price-num">
          <span class="single-price">{{item.price}}</span>
          <span class="num">x{{item.buy_num}}</span>
        </div>
      </div>

    </div>
    <div class="cell-price">
      <div class="price-total">
        <p>付款金额<span>￥{{orderInfo.pay_money}}</span></p>
      </div>
<!--      <div class="price-transfer">-->
<!--        <span>（含运费￥10）</span>-->
<!--      </div>-->
    </div>
<!--    <div class="cell-action border-1px-top">-->
<!--      <div class="expire-time">-->
<!--        <span>24小时候订单将关闭</span>-->
<!--      </div>-->
<!--      <div class="action-btns">-->
<!--        <span>取消</span>-->
<!--        <span>去支付</span>-->
<!--      </div>-->
<!--    </div>-->
    <div class="cell-action border-1px-top">
      <div class="expire-time">
        <span>配送至：{{orderInfo.address_info}}</span>
      </div>

    </div>
    <div class="cell-action border-1px-top">
      <div class="expire-time">
        <span>快递单号：{{orderInfo.deliver_sn}}</span>
      </div>
    </div>
    <div class="cell-action border-1px-top" v-if="orderInfo.deliver_sn">
      <div class="expire-time">
        <span>最新物流动态： <span style="color: #2d8cf0"> {{orderInfo.deliver_info.theLastMessage}}</span></span>
        <p style="margin-top: 5px"><button @click="queryDeliver(orderInfo.id)">查看物流详情</button></p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
     props:['orderInfo'],
     methods:{
       queryDeliver(id){
         let url = 'delver_info?id='+id;
         this.$go(url,false)
       }
     }
  }
</script>

<style lang="less" scoped>
  .order-cell{
    padding:0 28px;
    background: white;
    .cell-time-status{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90px;
      .cell-time{
        span{
          color:#666;
        }
      }
      .cell-status{
        span{
          color:#845f3f;
        }
      }
    }
    .cell-goods{
      .goods-item{
        display: flex;
        padding-top: 20px;
        .item-pic{
          flex-basis: 166px;
          height: 166px;
          .ignore{
            width:100%;
            height:100%;
          }
        }
        .item-info{
          flex:1;
          .info-name{
            padding-top:20px;
            h3{
              font-weight: 600;
              color:#333;
            }
          }
        }
        .item-price-num{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          flex-basis: 70px;
          .single-price{
            padding-top:20px;
            color:#666;
          }
          .num{
            padding-top:20px;
            color:#666;
          }
        }
        &:last-child{
          padding-bottom: 20px;
        }
      }
    }
    .cell-price{
      .price-total{
        padding-top:35px;
        p{
          text-align: right;
          color:#333;
          span{
            font-size: 28px;
            font-weight: 600;
            color:rgb(182, 9, 9);
          }
        }
      }
      .price-transfer{
        padding:20px 0;
        text-align: right;
        color:#333;
      }
    }
    .cell-action{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 113px;
      .expire-time{
        color:#666;
      }
      .action-btns{
        display: flex;
        align-items: center;
        span{
          display: inline-block;
          width:170px;
          height: 60px;
          box-sizing: border-box;
          line-height: 60px;
          text-align: center;
          border-radius: 5px;
          border:1px solid rgb(204, 204, 204);
          color:#666;
          &:not(:first-child){
            margin-left:20px;
            color:rgb(159, 128, 82);
            border-color: rgb(159, 128, 82);
          }
        }
      }
    }
  }
</style>
